<template>
       <div>
            <div class="leftContentItem" :style="{'left':km+'px','top':top+'px'}">
            <div class="itemImg" >
                <div class="leftContentImg"></div>
                <div class="leftContentImg"></div>
                <div class="leftContentImg"></div>
                <div class="leftContentImg"></div>
                <div class="leftContentImg">
                    <div class="buy" @click="hand">{{title}}</div>
                </div>
                <div class="leftContentImg"></div>
            </div>
            <div class="arrow"></div>
        <div class="arro"></div>
        </div>
      
</div>
</template>

<script>
export default {
     props:[
        'title',
        'km',
        'top'
        ],
        methods:{
            hand(){
                this.$emit('handc')
            }
        }
}
</script>

<style lang="scss" scoped>
   

//css3 第一个正方体
 .leftContentItem{
    perspective: 1000px;
    position: absolute;
       top: 383px;
    left: 519px;
}
 .leftContentItem .itemImg{
    position: absolute;
    left: 20%;
    top: 20%;
    width: 100px;
    height: 40px;
    transform-style: preserve-3d;
    transform: rotateX(-49deg) rotateY(-48deg) rotateZ(-6deg);
}
.leftContentItem .itemImg .leftContentImg{
    position: absolute;
    background: #5a5059;
    width: 100%;
    height: 38%;
    border-radius: 3%;
}

.leftContentItem .itemImg .leftContentImg:nth-child(1){
    transform: translateZ(50px);
   
    background: #504951;
    box-shadow: 1px 15px 30px black;
}
 .leftContentItem .itemImg .leftContentImg:nth-child(2){
    transform: rotateX(180deg) translateZ(50px);
}
.leftContentItem .itemImg .leftContentImg:nth-child(3){
    transform: rotateY(-90deg) translateZ(50px);
}
.leftContentItem .itemImg .leftContentImg:nth-child(4){
    transform: rotateY(90deg) translateZ(50px);
  
}
.leftContentItem .itemImg .leftContentImg:nth-child(5){
    transform: rotateX(90deg) translateZ(49px);
    height: 100px;
    text-align: center;
    color: #fefeff;
    line-height: 100px;
    font-size: 20px;
}
.buy{
 transform: rotateZ(-46deg) rotateX(5deg) rotateY(5deg);
    font-size: 20px;
    color: white;
    cursor: pointer;

}
.leftContentItem .itemImg .leftContentImg:nth-child(6){
    transform: rotateY(90deg) translateZ(50px);
    background: #504951;
    box-shadow: -2px 15px 30px black;
    
}





</style>
